<template>
  <view class="component-amap">
    <view class="loading">地图加载中</view>
    <view id="amap" class="amap" :listArr="listArr" :change:listArr="ModuleInstance.setParkList"></view>
		<view class="footer-btn">
			<u-button class="clock-btn" type="primary" :ripple="true" :disabled="disabled" @click="clockHandler">
				<u-icon name="checkmark-circle" class="icon"></u-icon>
				签到打卡
			</u-button>
		</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listArr: [],
    };
  },
  /*注意：uniapp子组件是没onLoad()和onShow()生命周期，只有页面组件才有 */
  mounted() {
    this.getDataList();
  },
  methods: {
    //获取数据
    getDataList() {
      this.listArr = [
        {
					id: 1,
          sysParkId: "1474279383801511937",
          sysParkName: "测试迭代1园区",
					lat: 39.909,//纬度
					lng: 116.39742,//经度
          address: "测试具体位置",
          head: "15847441451",
          phone: "13845545445",
        },
        {
					id: 2,
          sysParkId: "1509865555600539649",
          sysParkName: "新增园区",
					lat: 39.9065,//纬度
					lng: 116.3979,//经度
          address: "测试详细地址",
          head: "测试",
          phone: "18445544444",
        },
      ];
    },
    // //跳转到详情页面
    // goDetails({ sysParkId }) {
    //   uni.navigateTo({
    //     url: `/pages/statisticsAdminSingle/index?sysParkId=${sysParkId}`,
    //   });
    // },
		clockHandler() {
			this.disabled = !this.disabled
		}
  },
};
</script>
<script module="ModuleInstance" lang="renderjs">
export default {
    data() {
			return {
				map:null,
				layer:null,
				parkList:[],
			};
    },
    mounted(){
			if (window.AMap) {
				// 观测更新的数据在 view 层可以直接访问到
				this.initAmap();
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script');
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = `https://webapi.amap.com/maps?v=2.0&key=b0c8fc70cd402ddb153c3416e9261d50`;//您申请的key值
				//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
				script.onload = () => {
					window._AMapSecurityConfig = {
						securityJsCode:'f1b946e6f51b1235374f1f92c38b0c33',//您申请的安全密钥
					}
					this.initAmap();
				}
				document.head.appendChild(script); 
			}
    },
    beforeDestroy() {
         
    },
    methods: {
			initAmap(){
				this.map = new AMap.Map('amap', {
					viewMode: "2D", //默认使用 2D 模式
					zoom: 2,//显示的缩放级别
					zooms: [2, 15],//地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
					center: [116.39742, 39.909]
				});
				
				this.map.on("complete", ()=>{
					console.log("地图加载完成！");  
					this.createLabelsLayer();
					this.createCircle()
				});
			},
			
			// 构造圆形对象（标点的整体范围）
			createCircle() {
				// 添加标点范围
				var circle = new AMap.Circle({
				    center: [116.39742, 39.909], // 圆心位置
				    radius: 600,  //半径
						zIndex: 100,
				    strokeColor: "#96baff",  //线颜色
				    strokeWeight: 0,  //线粗细度
				    fillColor: "#96baff",  //填充颜色
				});
				this.map.add(circle)
			},
			
        //创建-海量点
			createLabelsLayer(){
				// 创建 AMap.LabelsLayer 图层
				if(!this.map)return;
				if(!this.layer){
					this.layer = new AMap.LabelsLayer({
						zIndex: 1000,
						collision: false
					});
					// 将图层添加到地图
					this.map.add(this.layer);
				}
				this.removeAllOverlay();
				var markers = [];
		
				this.parkList.forEach((element,index) => {
					element.position = [element.lng,element.lat];
					console.log(element)
					var labelMarker = new AMap.LabelMarker({
						position: element.position,
						icon: {
							type: 'image',
							image: element.id === 1 ? 'static/icon-clock.png' : 'static/icon-clock1.png',
							size: element.id === 1 ? [69.33,75.4] : [48, 52],
							anchor: 'bottom-center',
						}
					});
					markers.push(labelMarker);
					labelMarker.on('click', (e)=>{
						// 给marker绑定事件
						this.openInfo(element); 
					}); 
				});
				// 一次性将海量点添加到图层
				this.layer.add(markers);
				if(!this.isExistImplement){
					this.isExistImplement = true;//只执行一次
					this.map.setFitView(null, false, [60, 15, 30, 15]);//自适应显示多个点标记
					// let zoom = this.map.getZoom(); //获取当前地图级别
					// if(zoom>5)this.map.setZoom(5); //设置地图层级
				}
			},
        //在指定位置打开信息窗体
			openInfo(obj){
				//构建信息窗体中显示的内容
				let domStr = `
					<div class="map-open-info">
						<img src="static/icon-yes.png" alt="" />
						<span>你已进到打卡区域</span>
					</div>
				`;
				var infoWindow = new AMap.InfoWindow({
					zIndex:99999,
					offset: [0,-38],//偏移
					content: domStr,  //使用默认信息窗体框样式，显示信息内容
					anchor: 'bottom-center',
					autoMove: true,
					avoid: [20, 20, 20, 20]
				});
				infoWindow.open(this.map, obj.position);
				var button = document.querySelector('.map-open-info .button');
				button.onclick = ()=>{
					uni.navigateTo({
						url: `/pages/statisticsAdminSingle/index?sysParkId=${obj.sysParkId}`,
					});
					//this.$ownerInstance.callMethod('goDetails', {sysParkId:obj.sysParkId})
				}
			},
			removeAllOverlay(){
				// 清除地图上所有添加的覆盖物
				this.map.clearMap();
			},
			//接收数组参数
			setParkList(newValue, oldValue, ownerInstance, instance){
				this.parkList = newValue;
				this.createLabelsLayer();
			}
    }
};
</script>

<style lang="scss" scoped>
//高德地图-logo隐藏
/deep/.amap-logo {
  display: none;
  opacity: 0 !important;
}
//高德地图-版权隐藏
/deep/.amap-copyright {
  opacity: 0;
}
::v-deep .amap-info-content {
	padding: 0;
	border-radius: 12rpx;
}
::v-deep .amap-info-close {
	display: none;
}
::v-deep .amap-info-sharp {
	border-top-color: #3C7EFF;
}
/deep/.map-open-info {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 208rpx;
	height: 56rpx;
	line-height: 56rpx;
	background: #3C7EFF;
  position: relative;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 20rpx;
	color: #FFFFFF;
	text-align: center;
	font-style: normal;
	border-radius: 12rpx;
	img {
		width: 20rpx;
		height: 20rpx;
		margin-right: 6rpx;
	}
}
.component-amap {
	height: calc(100vh - var(--window-bottom) - 98rpx);
  position: relative;
  .loading {
    position: absolute;
    top: 35vh;
    left: 50%;
    transform: translateX(-50%);
  }
  .amap {
    height: 100%;
    position: relative;
    z-index: 8;
  }
}
.footer-btn {
	position: fixed;
	z-index: 99;
	background: #ffffff;
	height: 98rpx;
	bottom:0;
	width: 100%;
	border-top: 1px solid #ededed;
	padding: 0 50rpx;
	display: flex;
	align-items: center;
	.clock-btn {
		width: 100%;
		.icon {
			color: #FFFFFF;
			margin-right: 12rpx;
		}
	}
}
</style>
